<template>
	<up-navbar bgColor="transparent">
		<template #left>
			<image src="/static/index-top.png" style="height: 36px;width: auto;" mode="heightFix"></image>
		</template>
	</up-navbar>
	<view class="login-box">
		<image style="width: 160px;height: auto;margin-bottom: 100px;" src="/static/logo.png" mode="widthFix"></image>

		<up-button v-if="agree.length === 0" text="授权登录" color="#165DFF" size="large" shape="circle"
			@click="clickAgree"></up-button>
		<up-button v-else text="授权登录" color="#165DFF" size="large" shape="circle" openType="getPhoneNumber"
			@getphonenumber="Login"></up-button>
		<!-- <view class="f-s-12 u-m-t-40 three-color">如您点击授权登录，您将同意并授权</view> -->
		<!-- <view class="f-s-12 u-m-t-16 main-color">《百亿吉航驾考宝典用户服务协议》</view> -->
		<view class="up-m-t-40 f-s-16 up-info" @click="toHome">
			暂不登录
		</view>
	</view>

	<view class="up-flex up-flex-items-center u-flex-center u-m-t-40 bottom-agree">
		<up-checkbox-group v-model="agree">
			<up-checkbox activeColor="#165DFF" :size="16" name="agree">
			</up-checkbox>
		</up-checkbox-group>
		<view class="f-s-14"><text class="up-info">我已阅读并同意</text><text class="main-color">《驾考宝典用户服务协议》</text></view>
	</view>

</template>

<script setup>
	import {
		ref
	} from 'vue'
	import Func from '@/utils/common.js'
	import {
		useUserStore
	} from '@/stores/user'
	const userStore = useUserStore()
	const loginForm = ref({
		loginCode: '',
		phoneCode: '',
	})
	const agree = ref([])

	const GetLoginCode = () => {
		uni.login({
			provider: 'weixin',
			success: (res) => {
				loginForm.value.loginCode = res.code
			},
			fail: (err) => {
				console.info(err)
				Func.toast("默认授权失败")
			}
		})
	}

	const clickAgree = () => {
		Func.toast("请同意并阅读服务条款")
	}


	// 登录方法
	const Login = (e) => {
		if (e.detail.errMsg == 'getPhoneNumber:ok') {
			loginForm.value.phoneCode = e.detail.code
			userStore.login(loginForm.value).then(isLogin => {
				// 登录成功
				if (isLogin) {
					LoginSuccess()
					return
				}
				Func.toast("登录失败，请联系管理员")
			})
			return
		}
		Func.toast("已拒绝手机号授权")
	}

	// 登录成功处理
	const LoginSuccess = () => {
		userStore.getUserInfo().then(res => {
			uni.switchTab({
				url: '/pages/index'
			})
		})
	}

	const toHome = () => {
		uni.switchTab({
			url: '/pages/index'
		})
	}

	GetLoginCode()
</script>

<style lang="scss">
	page {
		background-image: url(https://imgs.ddeke.com/2025/01/14/EmW4SG11R8.png);
		background-repeat: no-repeat;
		background-size: cover;
	}

	.login-box {
		width: 80vw;
		position: absolute;
		left: 50%;
		top: 46%;
		transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.bottom-agree {
		position: fixed;
		bottom: 40px;
		width: 100vw;
	}
</style>